<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- html写这里  -->
    <div>
        <div id="app">
            <input v-on:input='input1' type="text" v-model='msg'> <button @click='btn1'>点击搜索</button>
            <ul>
                <!-- v-for是vue提供的循环指令比 原生好用 结合两者优点  -->
                <li v-bind:key='index' v-for="(item,index) in list">
                    {{item}}
                </li>
            </ul>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <!-- 开始写vue的核心代码 -->
        <script>
            var vm = new Vue({
                // 传入监管哪个容器
                el: '#app',
                // 这个容器所需要的数据
                data: {
                    msg: '',
                    list: [],
                    timer : ''
                },
                methods: {
                    btn1() {
                        console.log('btn1')
                        if (this.msg === '水果') {
                            this.list = ['香蕉', '苹果', '橘子', '梨']
                        } else {
                            this.list = []
                        }

                    },
                    input1() {
                        console.log('input1')

                        if (this.timer) {
                            clearTimeout(this.timer);
                        }
                        console.log('time1', this.timer)
                        this.timer = setTimeout(() => {

                            if (this.msg == '吴') {
                                console.log('settimeout111')
                                this.list = ['吴亦凡', '吴亦凡事件', '吴亦凡国际', '吴亦凡牙签']
                            } else if (this.msg == '吴亦') {
                                console.log('settimeout111')
                                this.list = ['吴亦凡面临巨额罚款', '吴亦凡凉了', '吴亦凡回应', '吴亦凡国籍']
                            } else  if(this.msg == '吴亦凡') {
                                console.log('settimeout111')
                                this.list = ['吴亦凡罗志祥', '吴亦凡都美竹', '吴亦凡娱乐圈', '吴亦凡后援团']
                            }else {
                                this.list = []
                            }
                        }, 3000)


                    },

                },
                watch: {
                    msg(value) {
                        console.log('watch进来了')
                        console.log(value)
                        if (this.msg == '') {
                            this.list = []
                        }
                    }
                }
            })

        </script>
</body>

</html>